<template>
  <div class="person">
    <!-- <h2>{{ a }}</h2> -->
    <h2>{{ list }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }} -- {{ item.age }}</li>
    </ul>
  </div>
  
</template>



<script lang="ts" setup name="Person">
// defineProps 可以不用引入，defineExpose也一样，属于宏函数，宏函数在vue3中不用引入，可以直接使用
// import {defineProps, withDefaults} from 'vue'
import {withDefaults} from 'vue'
import {type Persons} from '@/types'

// 接收a
// defineProps(['a'])

// 接收a，同时将props保存起来
// 接收b,list
// let x = defineProps(['a', 'b', 'list']) // 'c' 没传，默认是undefined
// console.log(x) // 对象
// console.log(x.a)

// 接收list+限制类型
// defineProps<{list: Persons}>()

// 接收list+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{list?: Persons}>(), {
  // 得是函数返回一个值，否则报错
  // list: [{id: "1", name: '张三', age: 20}, {id: "2", name: '李四', age: 25}]
  list: () =>[{id: "1", name: '张三', age: 20}, {id: "2", name: '李四', age: 25}]
})
// 比vue2麻烦多了，vue2直接default: ''

// 打印不了,没定义a
// console.log(a)

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px
}

button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>